<template>
	<view>
		<view class="my-settle-container">
			<!-- 全选区域 -->
			<label class="radio" @click="allChecked">
				<radio color="#27BA9B" :checked="isFullChecked" /><text>全选</text>
			</label>
			<!-- 合计区域 -->
			<view class="amount-box">
				合计:<text class="amount">￥{{checkedAllPrice | tofixed}}</text>
			</view>
			<!-- 结算按钮 -->
			<view class="btn-settle" @click="goPay">结算({{checkedCount}})</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			alltotals: {
				type: Number
			},
			checkedCount: {
				type: Number
			},
			checkedAllPrice: {
				type: Number
			}
		},
		name: "my-settle",
		data() {
			return {};
		},
		filters: {
			// 把数字处理为带两位小数点的数字
			tofixed(num) {
				return Number(num).toFixed(2)
			}
		},
		computed: {
			// 如果所有选中的按钮等于所有按钮 ，则true
			isFullChecked() {
				// 点击的时候，所有商品的状态都会改变
				return this.alltotals === this.checkedCount
			}
		},
		methods: {
			// 全选反选
			// 点击全选之后，所有按钮的状态都选择 
			allChecked() {
				const newState = !this.isFullChecked
				this.$emit('updateAllChecked', newState)
			},
			goPay() {
				if (this.checkedCount == 0) {
					return uni.showToast({
						title: '商品不能为空',
						icon: 'error'
					});
				}
				uni.navigateTo({
					url: '/subpkg/toPay/toPay'
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-settle-container {
		/* 底部固定定位 */
		position: fixed;
		bottom: 0;
		left: 0;
		/* 设置宽高和背景色 */
		width: 100%;
		height: 100rpx;
		// 将背景色从 cyan 改为 white
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 10rpx;
		font-size: 30rpx;
		// border-top: 1rpx solid #ededed;
		border-bottom: 1rpx solid #ededed;

		.radio {
			display: flex;
			align-items: center;
		}

		.amount {
			color: #c00000;
		}

		.btn-settle {
			width: 240rpx;
			margin: 0 10rpx;
			border-radius: 72rpx;
			background-color: #27BA9B;
			color: white;
			line-height: 80rpx;
			text-align: center;
			padding: 0 20rpx;
		}
	}
</style>